<template>
  <div class="todo-page">
    <van-sticky>
      <van-nav-bar
        v-if="userInfo && userInfo.postName"
        :title="
          userInfo.postName !== '学生' && !isEnterprise
            ? '待办事项'
            : '我的测评'
        "
        left-text=""
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>
    <div v-if="curRoleCode">
      <van-cell
        v-for="item of todoList"
        :key="item.key"
        is-link
        @click="toTodoDetail(item)"
      >
        <!-- 折叠面板标题 -->
        <template #value>
          <div>
            {{ item.name }}
          </div>
        </template>
      </van-cell>
    </div>
    <!-- curRoleCode为空，但是已经初始化数据了 -->
    <div v-else-if="userInfo && userInfo.tenantId">
      <van-empty description="您目前的岗位角色无需待办事项" />
    </div>
  </div>
</template>

<script lang="ts">
import Table from './table.vue'
import HandlePop from './handlePop/index.vue'
import ConditionCpt from './condition/index.vue'
import { useRouter } from 'vue-router'
import { useStore } from '/@/store'
import { defineComponent, ref, computed, onBeforeMount, watch } from 'vue'
import {
  getUserInfo,
  getRoleCode,
  refreshTodoData,
} from '/@/util/business-util'

export default defineComponent({
  components: { Table, HandlePop, ConditionCpt },
  setup() {
    const router = useRouter()
    const { commit, state } = useStore()
    let userInfo: any = ref(null) // 用户信息
    let curRoleCode: any = ref('') // 当前岗位角色
    let show = ref(true) //判断当前用户是心理老师或管理员等
    onBeforeMount(async () => {
      // 获取用户信息
      userInfo.value = await getUserInfo(
        commit,
        state,
        state.user.userId,
        false
      )
      curRoleCode.value = getRoleCode(userInfo.value)
      refreshTodoData(commit, userInfo.value, state) // 刷新待办事项数量

      show = computed(() => {
        if (
          userInfo.value.postName !== '学生' &&
          userInfo.value.postName !== '家长'
        ) {
          return true
        } else {
          return false
        }
      })
    })

    // 待办列表数量
    const todoList = computed(() => state.todoData.data)
    const isEnterprise = computed(() => {
      return state.enterprise.includes(userInfo.value.tenantId)
    })
    return {
      isEnterprise,
      userInfo,
      curRoleCode,
      todoList,
      toTodoDetail(item: any) {
        //根据不同用户跳转到不同页面
        if (show.value && !isEnterprise.value) {
          router.push({
            name: 'TodoDetail',
            query: {
              activeNames: item.key,
            },
          })
        } else {
          router.push({
            name: 'evaluation',
            query: { userId: userInfo.value.id },
          })
        }
      },
    }
  },
  methods: {
    onClickLeft() {
      history.back()
    },
    // 根据数量返回颜色
    filterColor(qty: number | string) {
      // 待办数量区分颜色
      const colorMap = [
        {
          range: [0, 0], // 数量范围
          color: '#808080', // 颜色
        },
        {
          range: [1, 10], // 数量范围
          color: '#FFA500', // 颜色
        },
        {
          range: [11, 99999999], // 数量范围
          color: '#FF0000', // 颜色
        },
      ]
      // 过滤数据
      const data = colorMap.find((c) => {
        return Number(qty) >= c.range[0] && Number(qty) <= c.range[1]
      })
      return (data && data.color) || ''
    },
  },
})
</script>

<style lang="less" scoped>
.todo-page {
  width: 100%;
  min-height: 100vh;
  padding-bottom: 50px;
}
</style>
